<!--节点列表页面组件-->
<template>
  <div>
    <div class="resourceNodeManage tempxyz ">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">节点管理</span>
          </div>
          <div class="header-right-wraper">
            <div class="search-wrapper">
              <CInput
                maxlength="50"
                placeholder="按主机名搜索..."
                v-model="searchName"
                class="input-search-style"
                @keyup.enter="enterfaction"
              />
              <!-- 搜索 -->
              <!-- <img
                class="iconstylesearch"
                src="@/assets/icons/search.png"
                v-if="showimgsearchicon"
                @click="enterfaction"
                alt
              /> -->
              <!-- 清除 -->
              <!-- <img
                class="iconstyleoff"
                src="@/assets/icons/clear.png"
                v-if="showimgofficon"
                @click="clearmess"
                alt
              /> -->

              <CButton
                color="info"
                class="header-search system-btn-style"
                @click="enterfaction"
              >
                搜索
                <!-- <CIcon
                  name="cil-magnifying-glass"
                  style="height: 14px; width: 14px"
                />&nbsp;&nbsp; -->
              </CButton>
            </div>
            <CButton
              color="info"
              size="sm"
              class="header-main-btn system-btn-style"
              @click="addCatalog1"
              data-permission="Btn_Node_Add"
            >
              <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;节点
            </CButton>
            <!-- <CButton
              color="info"
              size="sm"
              class="header-main-btn system-btn-style"
              @click="addCatalog"
              data-permission="Btn_Node_Add"
              :width="90"
            >
              <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;节点组
            </CButton> -->
          </div>
        </CCardHeader>

        <CCardBody class="card-body">
          <div style="height: calc(100% - 46px)">
            <TableList
              ref="table"
              :getColumn="getColumns"
              :getAxios="getAxios"
              selection
            >
              <template v-slot:status="item">
                <i-switch
                  size="large"
                  v-model="item.data.row.status"
                  :before-change="beforeChange"
                  :true-value="0"
                  :false-value="1"
                  @on-change="changedStatus(data, item.data.row)"
                >
                  <span slot="open">开启</span>
                  <span slot="close">禁用</span>
                </i-switch>
              </template>
              <template v-slot:nodeType="item">
                {{ item.data.row.nodeType == "0" ? "主节点" : "" }}
                {{ item.data.row.nodeType == "1" ? "服务节点" : "" }}
                {{ item.data.row.nodeType == "2" ? "计算节点" : "" }}
              </template>
              <template v-slot:show_details="item">
                <CButton
                  title="查看"
                  class="textBtnStyle system-btn-style"
                  @click="getInfo(item.data.row)"
                >
                  查看
                </CButton>
                <CButton
                  title="编辑"
                  class="textBtnStyle system-btn-style"
                  @click="addCatalog(item.data.row)"
                  data-permission="Btn_Node_Up"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  class="textBtnStyle system-btn-style"
                  @click="del(item.data.row)"
                  data-permission="Btn_Node_Del"
                >
                  删除
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>

        <!--
          <CDataTable
            :items="data"
            :key="data"
            :fields="fields"
            hover
            border
            class="nodeTable borderStyle"
          >
            <template #show_details="{ item }">
              <td>
                &lt;!&ndash; <CButton
                  v-c-tooltip="'查看'"
                  title="查看"
                  color="rgb(2,40,88)"
                  class="buttonMargin watchBtn"
                  @click="getInfo(item)"
                >
                  <CIcon class="colortempstyle" name="cil-line-spacing" />
                </CButton>
                <CButton
                  v-c-tooltip="'编辑'"
                  title="编辑"
                  color="rgb(2,40,88)"
                  class="buttonMargin writeBtn"
                  @click="update(item)"
                  data-permission="Btn_Node_Up"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/edit.svg"
                    alt
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  color="rgb(2,40,88)"
                  class="buttonMargin deleteBtn"
                  @click="del(item)"
                  data-permission="Btn_Node_Del"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/delete.svg"
                    alt
                  />
                </CButton> &ndash;&gt;
                <CButton
                  title="查看"
                  class="textBtnStyle"
                  @click="getInfo(item)"
                >
                查看
                </CButton>
                <CButton
                  title="编辑"
                  class="textBtnStyle"
                  @click="update(item)"
                  data-permission="Btn_Node_Up"
                >
                编辑
                </CButton>
                <CButton
                  title="删除"
                  class="textBtnStyle"
                  @click="del(item)"
                  data-permission="Btn_Node_Del"
                >
                删除
                </CButton>
              </td>
            </template>
          </CDataTable>
        </CCardBody>
        <CCardFooter>
          <CRow>
            <CCol class="footerPage">
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>-->

        <Modal
          v-model="updateShow"
          draggable
          scrollable
          :styles="modalStyle"
          title="更新节点信息"
        >
          <p slot="header" class="modalHeader">更新节点信息</p>
          <CRow>
            <CCol md="12">
              <CForm>
                <CInput label="主机名" horizontal v-model="upData.nodeName" />
                <CInput label="别名" horizontal v-model="upData.name" />
                <!-- @blur="determineTheNodeName" -->
                <CInput
                  label="IP地址"
                  horizontal
                  v-model="upData.ipAddress"
                  @keyup="upDataTest"
                />
                <p class="ipTestStyle" id="upDataTest"></p>
              </CForm>
            </CCol>
          </CRow>
          <template #footer class="footerBtns">
            <CButton @click="updateCancel" color="info" class="cancel-btn"
              >取消</CButton
            >
            <CButton @click="updateOk" color="info" class="system-btn-style"
              >确定</CButton
            >
          </template>
        </Modal>
        <Modal
          v-model="delShow"
          draggable
          scrollable
          :styles="modalStyle"
          title="删除节点信息"
        >
          <p slot="header" class="modalHeader">
            <img src="@/assets/icons/shanchu.svg" alt />
            <span>删除节点信息</span>
          </p>
          <div class="modalBody">
          <p v-if="groupNameData.toString().length"> 与<span style="color:red;font-size:18px">{{groupNameData.toString()}}</span>相关联信息将会消失
          
          </p> 
            <p>删除节点时与节点相关的信息都会丢失</p>
            <p>请确认是否删除?</p>
          </div>
          <template #footer class="footerBtns">
            <CButton @click="delCancel" color="info" class="cancel-btn"
              >取消</CButton
            >
            <CButton @click="delOk" color="info" class="system-btn-style"
              >确定</CButton
            >
          </template>
        </Modal>
        <Modal
          v-model="addShow"
          draggable
          scrollable
          :styles="modalStyle"
          :title="modalData ? '编辑节点信息' : '创建节点信息'"
        >
          <Form
            ref="form"
            :model="upData"
            :label-width="80"
            :rules="formItemRule"
          >
            <FormItem label="主机名:" prop="nodeName">
              <Input v-model="upData.nodeName"
            ></Input></FormItem>
            <FormItem prop="name" label="别名:">
              <Input horizontal v-model="upData.name"
            /></FormItem>
            <FormItem label="操作系统:">
              <Select v-model="upData.operateSystem">
                <template v-for="item in operateSystem">
                  <Option :value="item.value" :key="item.value">{{
                    item.label
                  }}</Option>
                </template>
              </Select>
            </FormItem>
            <FormItem prop="ipAddress" label="IP地址:"
              ><Input horizontal v-model="upData.ipAddress" @keyup="testIp" />
              <p
                class="ipTestStyle"
                id="ipTest"
                style="padding-bottom: 10px"
              ></p>
            </FormItem>
            <FormItem label="节点类型" prop="nodeType">
              <Select v-model="upData.nodeType" placeholder="请选择节点">
                <Option
                  v-for="item in nodeTypeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <Checkbox v-model="single" style="display: inline-block">
              <FormItem
                label="GPU:"
                style="
                  display: inline-block;
                  margin-left: -21px;
                  margin-top: -5 px;
                "
              >
                <Input
                  class="updataclass"
                  v-model="upData.gpuInfo"
                  :disabled="!single"
                ></Input> </FormItem
            ></Checkbox>
          </Form>
          <template #footer class="footerBtns">
            <CButton @click="addCancel" color="info" class="cancel-btn"
              >取消</CButton
            >
            <CButton @click="addOk" color="info" class="system-btn-style"
              >确定</CButton
            >
          </template>
        </Modal>
        <Modal
          v-model="lookNodeMessage"
          draggable
          scrollable
          :styles="modalStyle"
          title="查看节点信息"
        >
          <CInput
            label="主机名"
            horizontal
            v-model="lookNodeMessage.nodeName"
            disabled
          />
          <CInput
            label="别名"
            horizontal
            v-model="lookNodeMessage.name"
            disabled
          />
          <CInput
            label="IP地址"
            horizontal
            v-model="lookNodeMessage.ipAddress"
            disabled
          />
          <CInput
            label="操作系统"
            horizontal
            v-model="lookNodeMessage.operateSystem"
            disabled
          />
          <CInput
            label="GPU"
            horizontal
            v-model="lookNodeMessage.gpuInfo"
            disabled
          />
          <CInput label="所属组" horizontal v-model="nodeGroupData" disabled />
        </Modal>
      </CCard>
    </div>
  </div>
</template>

<!--js代码-->
<script>
const fields = [
  {
    label: "序号",
    key: "number",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    key: "nodeName",
    label: "主机名",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    key: "name",
    label: "别名",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    key: "ipAddress",
    label: "IP地址",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    key: "cpuUsage",
    label: "CPU使用率",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    key: "operateSystem",
    label: "操作系统",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    title: "CPU核数(个)",
    key: "cpuCores",
    width: "110",
    align: "center",
  },
  {
    title: "内存(GiB)",
    key: "memoryTotal",
    width: "110",
    align: "center",
  },
  // {
  //   key: "status",
  //   label: "状态",
  //   align: "center",
  //   _style: "background:rgba(241,244,249,1);",
  // },
  // {
  //   key: "memoryFreeRate",
  //   label: "空闲内存(G)",
  //   align: "center",
  //   _style: "background:rgba(241,244,249,1);",
  // },
  {
    key: "memoryTotalRate",
    label: "总内存(G)",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  {
    key: "diskFreeRate",
    label: "空闲磁盘(T)",
    align: "center",
    _style: "background:rgba(241,244,249,1);",
  },
  // {
  //   key: "diskTotal",
  //   label: "总磁盘(T)",
  //   align: "center",
  //   _style: "background:rgba(241,244,249,1);",
  // },
  {
    label: "操作",
    key: "show_details",
    _style: "width:20%;background:rgba(241,244,249,1);",
    align: "center",
  },
];

import TableList from "@/template/table/TableList";
export default {
  name: "resourceNode",
  data() {
    return {
      groupNameData:[],
      operateSystem: [
        { label: "Linux", value: "0" },
        { label: "windows", value: "1" },
      ],
      formItemRule: {
        nodeName: {
          required: true,
          message: "请输入服务名称",
          trigger: "blur",
        },
        name: {
          required: true,
          message: "请输入服别名",
          trigger: "blur",
        },
        ipAddress: {
          required: true,
          message: "请输入IP地址",
          trigger: "blur",
        },
        nodeType: {
          required: true,
          message: "请输入服务类型",
          trigger: "blur",
        },
      },
      single: false,
      nodeGroupData: [],
      // hh:'',
      lookNodeMessage: false,
      // lookNodeMessage:{
      // },
      modalData: "",
      // { label: "最小值", value: "Min ", isCheck: true 0主节点,1服务节点,2计算节点)},
      // { label: "最大值", value: "Max", isCheck: false },
      nodeTypeList: [
        { label: "主节点", value: "0" },
        { label: "服务节点", value: "1" },
        { label: "计算节点", value: "2" },
      ],
      showimgsearchicon: true,
      showimgofficon: false,
      getColumns: [
        {
          key: "nodeName",
          title: "主机名",
          align: "center",
        },
        {
          key: "name",
          title: "别名",
          align: "center",
        },
        {
          key: "ipAddress",
          title: "IP地址",
          align: "center",
        },
        {
          key: "operateSystem",
          title: "操作系统",
          align: "center",
        },
        // {
        //   key: "cpuUsage",
        //   title: "CPU使用率",
        //   align: "center",
        // },
        {
          title: "CPU核数(个)",
          key: "cpuCores",
          width: "100",
          align: "center",
        },
        {
          title: "内存(GiB)",
          key: "memoryTotal",
          width: "110",
          align: "center",
        },
        // {
        //   key: "status",
        //   slot: "status",
        //   title: "状态",
        //   align: "center",
        //   minWidth: 100,
        // },
        //  {
        //   key: "memoryTotal",
        //   title: "总内存(G)",
        //   align: "center",
        // },
        // {
        //   key: "memoryFree",
        //   title: "空闲内存(G)",
        //   align: "center",
        // },
        {
          key: "diskTotal",
          title: "总磁盘(T)",
          align: "center",
        },
        {
          key: "diskFree",
          title: "空闲磁盘(T)",
          align: "center",
        },

        {
          title: "GPU",
          key: "gpuInfo",
          align: "center",
          width: "60",
        },
        {
          title: "节点类型",
          slot: "nodeType",
          key: "nodeType",
          align: "center",
        },
        {
          key: "status",
          slot: "status",
          title: "计算状态",
          align: "center",
          width: "100",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerText",
          width: "170",
          align: "center",
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          align: "center",
          width: "220",
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.clusterNode, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },

      modalStyle: { top: "200px" },
      fields,
      loading: true,
      currentPage: 1,
      pages: 0,
      getShow: false,
      updateShow: false,
      delShow: false,
      addShow: false,
      total: 0,
      item: {},
      allNum: 0,
      pageSize: 15,
      searchName: "",
      data: [],
      allData: [],
      showData: {},
      upData: {
        name: "",
        ipAddress: "",
        nodeName: "",
        operateSystem: "",
        nodeType: "",
        nodeType1: "",
        gpuInfo: "",
      },
      addData: {
        name: "",
        ipAddress: "",
        nodeName: "",
        operateSystem: "",
        nodeTypeList: "",
        gpuData: "",
      },
      clickId: "",
      // 添加节点弹窗验证IP地址
      ipFlag: false,
      nodeNameflag: 1,
    };
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    // upData: {
    //   handler() {
    //     //注意此处就是handler
    //     console.log(this.c);
    //   },
    //   deep: true,
    //   immediate: true, // watch 的一个特点是，最初绑定的时候是不会执行的，要等到 serviceList 改变时才执行监听计算。加上改字段让他最初绑定的时候就执行
    // },
    searchName(newVal, oldVal) {
      if (newVal.length >= 50) {
        this.$Message.warning("名称长度不得超过50个字符");
      }
      if (newVal == "") {
        this.showimgsearchicon = true;
        this.showimgofficon = false;
      } else {
        this.showimgsearchicon = false;
        this.showimgofficon = true;
      }
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getModelCategoryTree(this.searchName);
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getModelCategoryTree(this.searchName);
    },
  },
  mounted() {},
  methods: {
    changedStatus(data, item) {
      let that = this;
      console.log(item, "zhuangtai");
      let a = item.status ? "disable" : "enable";
      // console.log(item, "version");
      let url = that.$api.monitorApi.nodesStatus + a + "/nodes";
      let params = item.nodeName;
      let param = [];
      param.push(params);
      console.log(param, "param");
      this.http.post(url, param).then((res) => {
        if (res.data.success) {
          this.$Message.success("更改成功");
        } else {
          this.$Message.error("系统异常，请联系管理员");
        }
      });
    },
    beforeChange() {
      return new Promise((resolve, reject) => {
        this.$Modal.confirm({
          title: "切换确认",
          content: "您确认要切换开关状态吗？",
          onOk: () => {
            resolve();
          },
          onCancel: () => {
            reject();
          },
        });
      });
    },
    testIp() {
      let val = this.lookNodeMessage.ipAddress;
      console.log(val, "testIp");
      let ipRegex = `((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}`;
      if (ipRegex.test("11.23.34.56") === false) {
        // this.$message.error('输入IP格式有误，请重新输入！！！')
        let ipTest = document.getElementById("ipTest");
        ipTest.innerHTML = "IP地址不合法";
        ipTest.style.color = "red";
        this.ipFlag = false;
      } else {
        this.ipFlag = true;
        let ipTest = document.getElementById("ipTest");
        ipTest.innerHTML = "IP地址合法";
        ipTest.style.color = "green";
      }
    },
    upDataTest() {

      let val = this.upData.ipAddress;

      let ipRegex = `((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}`;
      if (ipRegex.test(val) === false) {

        // this.$message.error('输入IP格式有误，请重新输入！！！')
        let ipTest = document.getElementById("upDataTest");
        ipTest.innerHTML = "IP地址不合法";
        ipTest.style.color = "red";
        this.ipFlag = false;
      } else {
        this.ipFlag = true;
        let ipTest = document.getElementById("upDataTest");
        ipTest.innerHTML = "IP地址合法";
        ipTest.style.color = "green";
      }
    },
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    enterfaction() {
      this.currentPage = 1;
      this.handleSearch3();
    },
    clearmess() {
      this.searchName = "";
      this.getModelCategoryTree(this.searchName);
    },
    getInfo(val) {
      //节点名称
      // this.$router.push({
      //   name: "nodeDetails",
      //   params: { name: val.nodeName },
      // });
      // let userLink = `/monitor/resourceNode/nodeDetails/${val.nodeName}`;
      // this.$router.push({ path: userLink });
      this.nodeGroupData = [];
      console.log(val, "valval");
      this.lookNodeMessage = true;
      this.lookNodeMessage = val;
      val.nodeGroups.forEach((ele) => {
        this.nodeGroupData.push(ele.groupName);
      });
    },
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.upData = val;
      // this.getModelCategoryTree();
    },
    updateCancel() {
      this.updateShow = false;
    },
    del(val) {
      this.delShow = true;
      this.clickId = val.id;
      this.groupNameData=[]
        val.nodeGroups.forEach(ele=>{
          this.groupNameData.push(ele.groupName)
        })
    },
    addCatalog(data) {
      this.modalData = "";
      this.single = false
      this.addShow = true;
      this.modalData = JSON.parse(JSON.stringify(data.id));
      this.upData = JSON.parse(JSON.stringify(data));

      console.log(this.upData, "upDataupData");
      if (this.upData.operateSystem == "Linux") {
        this.upData.operateSystem = "0";
      } else {
        this.upData.operateSystem = "1";
      }

      this.upData.nodeType = this.upData.nodeType + "";
    },
    addCatalog1() {
      this.upData = {
        name: "",
        ipAddress: "",
        nodeName: "",
        operateSystem: "",
        nodeType: "",
        gpuInfo: "",
      };
      this.modalData = "";
      this.single = false
      this.addShow = true;
    },
    addCancel() {
      this.addShow = false;
      let ipTest = document.getElementById("ipTest");
      ipTest.innerHTML = "";
      this.$refs.table.resetFields();
    },

    delCancel() {
      this.delShow = false;
    },
    getCancel() {
      this.getShow = false;
    },
    getOk() { 
      this.getShow = false;
    
    },
    addOk() {
      let self = this;
      self.$refs.form.validate((valid) => {

        if (valid) {
          let path = this.modalData
            ? this.$api.monitorApi.clusterNodeUpdata + this.modalData
            : this.$api.monitorApi.clusterNode;
          if (this.single && self.upData.gpuInfo == "") {
            self.upData.gpuInfo = "未知";
          }
          if (!this.single) {
            self.upData.gpuInfo = "";
          }
          let operateSystemData = "";
          if (self.upData.operateSystem == "0") {
            operateSystemData = "Linux";
          } else {
            operateSystemData = "windows";
          }
          let param = {
            ipAddress: self.upData.ipAddress,
            name: self.upData.name,
            nodeName: self.upData.nodeName,
            operateSystem: operateSystemData,
            gpuInfo: self.upData.gpuInfo,
            nodeType: self.upData.nodeType,
          };
          if (!this.modalData) {
            this.http.post(path, param).then((res) => {
              if (res.data.success) {
                this.$Message.success(res.data.message);
                this.getModelCategoryTree(this.searchName);
                this.addShow = false;
                let ipTest = document.getElementById("ipTest");
                ipTest.innerHTML = "";
              } else {
                this.$Message.error(res.data.message);
                let ipTest = document.getElementById("ipTest");
                ipTest.innerHTML = "";
              }
            });
          } else {
            this.http.put(path, param).then((res) => {
              if (res.data.success) {
                this.$Message.success(res.data.message);
                this.getModelCategoryTree(this.searchName);
                this.addShow = false;
                let ipTest = document.getElementById("ipTest");
                ipTest.innerHTML = "";
              } else {
                this.$Message.error(res.data.message);
                let ipTest = document.getElementById("ipTest");
                ipTest.innerHTML = "";
              }
            });
          }
        } else {
          this.$Message.error("请完成表单！");
        }
      });
    },
    updateOk() {
      let self = this;
      let path = this.$api.monitorApi.clusterNode + "/" + self.clickId;
      let param = {
        ipAddress: self.upData.ipAddress,
        name: self.upData.name,
        nodeName: self.upData.nodeName,
        operateSystem: self.upData.operateSystem,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.updateShow = false;
          this.$Message.success(res.data.message);
          this.getModelCategoryTree();
          this.upData = {
            name: "",
            ipAddress: "",
            nodeName: "",
          };
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delOk() {
      let self = this;
      let path = this.$api.monitorApi.clusterNode + "/" + self.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.getModelCategoryTree(this.searchName);
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },

    getModelCategoryTree(name) {
      let self = this;
      let path = this.$api.monitorApi.clusterNode;
      let param = {
        pageNum: self.currentPage,
        pageSize: self.pageSize,
        operateSystem: self.upData.operateSystem,
        name: name,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      return;
    },

    handleSearch3() {
      this.getModelCategoryTree(this.searchName.trim());
    },
  },
  components: { TableList },
};
</script>

<!--css样式-->
<style scoped>
.updataclass {
  width: 400px;
}
.myCol {
  margin-left: 10px;
}
.search {
  display: flex;
}

/* .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.76563rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  width: 50px;
} */
.table-responsive {
  height: 50% !important;
}
.labelName {
  margin-left: -15px;
  margin-right: 37px;
}
.c-footer.c-footer-fixed {
  z-index: 900;
}

.divMargin {
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.colMargin {
  margin-left: 25px;
}
.serachName {
  width: 197px;
}
.spanMargin {
  margin: 0 10px;
}
.buttonPadding {
  padding: 3px;
}
.buttonMargin {
  margin-right: 5px;
}
.searchBtn,
.addBtn {
  height: 35px;
  background-color: #3c6ef0;
  width: 90px;
}

.addBtn {
  color: #ffffff;
  background-color: #3c6ef0;
  margin-top: 3px;
}
.card-header-actions {
  display: flex;
  position: absolute;
  top: -10px;
  left: 158%;
}
.watchBtn,
.writeBtn {
  color: rgb(2, 40, 88);
}
.deleteBtn {
  color: rgb(2, 40, 88);
}

.container {
  position: absolute;
  width: 100%;
  top: 23px;
}
.left-group {
  min-width: 390px;
  display: inline-block;
}
.right-group {
  min-width: 310px;
  display: inline-block;
}
.mid-group {
  flex: 1;
  min-width: 200px;
}
.card {
  min-width: 730px;
}
.iconstyle {
  margin-top: 2px;
  margin-left: 10px;
  width: 20px;
  height: 20px;
}

.leftTree .btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
/* 分页 */
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  margin-right: 5px;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.ipTestStyle {
  font-size: 8px;
  width: 150px;
  height: 2px;
  margin-top: -10px;
  margin-bottom: 4px;
  margin-left: 120px;
}

.statu {
  height: 58px;
  /* margin-right: 3px; */
  margin-left: 3px;
  line-height: 30px;
}
.input {
  width: 347px;
  margin-left: 64px;
  cursor: pointer;
}
</style>
<!--优化覆盖样式-->
<style scoped>
/* .resourceNodeManage /deep/ .card {
  height: calc(100vh - 80px);
} */

/* .resourceNodeManage /deep/ .card .card-body {
  height: calc(100vh - 136px);
  top: 0 !important;
  margin-top: 52px;
} */
.rightCard {
  height: calc(100vh - 80px);
}

.rightCard .card-body {
  margin-top: 0;
}
.srarchStyle {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.srarchStyle /deep/ .form-group {
  margin-bottom: 0;
}
</style>
